<template>

  <div>

    <div v-if="postForm.id && !postForm.init" style="padding-bottom: 20px; cursor: pointer" @click="toInit">
      <el-alert type="error" title="为了您的账号安全，请尽快修改账号密码， 点击此处去修改！"/>
    </div>

    <div v-if="siteData.props.realPerson" class="el-alert el-alert--warning is-light" style="margin-bottom: 20px" >
      <el-link type="primary" style="font-size: 12px" @click="toReal">姓名和身份证号需通过实名认证修改，点击此处去实名认证！</el-link>
    </div>

    <el-form ref="postForm" :model="postForm" :rules="rules" label-width="100px" label-position="left">

      <el-row :gutter="20" type="flex" style="flex-wrap:wrap; flex-direction: row">
        <el-col :span="12">
          <el-form-item label="用户编号">
            <el-input v-model="postForm.id" size="small" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录账号">
            <el-input v-model="postForm.userName" size="small" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门">
            <el-input v-model="postForm.deptCode_dictText" size="small" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="siteData.props.realPerson" label="姓名">
            <el-input v-model="postForm.realName" disabled size="small"/>
          </el-form-item>
          <el-form-item v-else label="姓名" prop="realName">
            <el-input v-model="postForm.realName" size="small"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item v-if="siteData.props.realPerson" label="身份证号">
            <el-input v-model="postForm.idCard" disabled size="small" />
          </el-form-item>
          <el-form-item v-else label="身份证号">
            <el-input v-model="postForm.idCard" size="small" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="postForm.email" size="small" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="用户头像">
            <file-upload
              v-model="postForm.avatar"
              :limit="1"
              :compress="5000"
              list-type="picture-card"
              tips="请上传jpg或png格式图片"
              accept=".jpg,.png,.jpeg" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button :loading="loading" type="primary" @click="updateInfo">更新资料</el-button>
      </el-form-item>
    </el-form>


  </div>

</template>

<script>
import { findInfo, updateData } from '@/api/sys/user/user'
import { mapGetters } from 'vuex'
import { isEmailIgnoresNull } from '@/utils/validate'

export default {
  data() {
    return {
      postForm: {},
      bindVisible: false,
      loading: false,
      rules: {
        realName: [
          { required: true, message: '姓名不能为空！' }
        ],
        email: [
          { validator: isEmailIgnoresNull }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'token',
      'siteData'
    ])
  },

  created() {
    this.fetchData()
  },
  methods: {

    fetchData() {
      findInfo(this.token).then(res => {
        this.postForm = res.data
      })
    },

    updateInfo() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true

        updateData(this.postForm).then(() => {
          this.loading = false
          this.$notify({
            title: '成功',
            message: '资料修改成功！',
            type: 'success',
            duration: 2000
          })

          setTimeout(() => {
            window.location.reload()
          }, 1500)
        }).catch(() => {
          this.loading = false
        })
      })
    },

    showBind() {
      this.bindVisible = true
    },

    toInit() {
      this.$router.push({ name: 'UserInit' })
    },

    toReal() {
      this.$router.push({ name: 'UserReal' })
    }

  }
}
</script>

<style scoped>

</style>

